<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="author-name" content="Mironcoder | Miron Mahmud" />
  <meta name="author-email" content="mironcoder@gmail.com" />
  <meta name="author-profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template-name" content="Vegana" />
  <meta name="template-created" content="09-November-2020" />
  <meta name="template-title" content="Vegana - vegan food eCommerce store html template" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="keywords" content="vegana, vegan, food, eCommerce, store, html, template, bootstrap, vegetarian, organic, vegetables, greengrocery, fruit, healthy, shop" />
  <title>商品详情</title>
  <link rel="icon" href="../assets/images/logo/favicon.png" />
  <link rel="stylesheet" href="../assets/source/css/vendor/flaticon.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/fontawesome.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/slick.css" />
  <link rel="stylesheet" href="../assets/source/css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/main.css" />
  <link rel="stylesheet" href="../assets/source/css/custom/product-details.css" />
  <style>
    #left{
      float: left;
    }
  </style>
 </head>
 <body>
  <div id="app"> 
  <header class="header-part">
   <div class="container">
    <div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6">
      <ul class="header-info">
        <li> <i class="fas fa-envelope"></i><p>{{adminEmail}}</p></li>
        <li> <i class="fas fa-phone-alt"></i><p>+{{adminTel}}</p></li>
      </ul>
     </div>
     <div class="col-sm-12 col-md-6 col-lg-6">
      <div class="login_info" v-if="userInfo == ''">
				<a href="login.html" target="_blank" title="点击登录">您好，请先登录</a>
				<a href="reg.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			<div class="login_info" v-else>
				<span>尊敬的用户{{userInfo.uname}},您好</span>
				<a href="login.html" title="点击退出">退出登录</a>
			</div>
     </div>
    </div>
   </div> 
  </header> 
  <nav class="navbar-part">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="navbar-element">
       <ul class="left-widget">
        <li><a class="icon icon-inline menu-bar" href="#"><i class="fas fa-align-left"></i></a></li>
       </ul> 
       <a class="navbar-logo" href="#"> <img src="../assets/images/logo/01.png" alt="logo" /> </a>
       <form class="search-form navbar-src"> 
        <input type="text" placeholder="搜索任何内容..." /> 
        <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>搜索</span> </button>
       </form>
       <ul class="right-widget">
        <li><a class="icon icon-inline" href="login.html"><i class="fas fa-user"></i></a></li>
        <li><a class="icon icon-inline" href="wishlist.html"><i class="fas fa-heart"></i><sup>{{wishCount}}</sup></a></li>
        <li><a class="icon icon-inline" href="cartlist.html"><i class="fas fa-shopping-cart"></i><sup>{{cartCount}}</sup></a></li>
       </ul>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-lg-12">
      <div class="navbar-slide">
       <div class="navbar-content">
        <div class="navbar-slide-cross"> 
         <a class="icon icon-inline cross-btn" href="#"><i class="fas fa-times"></i></a>
        </div>
        <div class="navbar-slide-logo"> 
         <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
        </div>
        <form class="search-form mb-4 navbar-slide-src"> 
         <input type="text" placeholder="Search anything..." /> 
         <button class="btn btn-inline"> <i class="fas fa-search"></i> <span>search</span> </button>
        </form>
        <ul class="navbar-list">
         <li class="navbar-item active"><a class="navbar-link" href="../index.html">家</a></li>
         
         <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>店</span> <i class="fas fa-chevron-down"></i> </a>
          <ul class="dropdown-list">
           <li><a class="dropdown-link" href="shop-rightbar.html">使用右栏购物</a></li>
          </ul></li>
         <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>页面</span> <i class="fas fa-chevron-down"></i> </a>
          <ul class="dropdown-list">
           <li><a class="dropdown-link" href="cartlist.html">购物清单</a></li>
           <li><a class="dropdown-link" href="wishlist.html">心愿单</a></li>
           <li><a class="dropdown-link" href="login.html">注销</a></li>
          </ul></li>
         <li class="navbar-item navbar-dropdown"> <a class="navbar-link dropdown-indicator" href="#"> <span>博客</span> <i class="fas fa-chevron-down"></i> </a>
          <ul class="dropdown-list">
           <li><a class="dropdown-link" href="blog-list.html">博客列表</a></li>
          </ul></li>
         <li class="navbar-item"><a class="navbar-link" href="account.html">账户</a></li>
         <li class="navbar-item"><a class="navbar-link" href="contact.html">联系我们</a></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
   </div> 
  </nav>
  <div class="btmbar-part">
   <ul class="btmbar-widget">
    <li> <a href="../index.html"> <i class="fas fa-home"></i> <span>Home</span> </a></li>
    <li> <a href="wishlist.html" class="wish-icon"> <i class="fas fa-heart"></i> <span>Wishlist</span> <sup>0</sup> </a></li>
    <li> <a href="cartlist.html" class="cart-icon"> <i class="fas fa-shopping-basket"></i> <span>Cart</span> <sup>0</sup> </a></li>
    <li> <a href="account.html"> <i class="fas fa-cog"></i> <span>Settings</span> </a></li>
   </ul>
  </div> 
  <section class="single-banner">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="single-content">
       <h2>单品详情</h2>
       <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../index.html">家</a></li>
        <li class="breadcrumb-item"><a href="shop-leftbar.html">店</a></li>
        <li class="breadcrumb-item active" aria-current="page">产品详情</li>
       </ol>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="pro-det-part">
   <div class="container">
    <div class="row">
     <div class="col-md-6 col-lg-5">
      <div class="pro-det-img"> 
      <img  :src="picsrc" alt="商品图片" />
      </div>
     </div>
     <div class="col-sm-8 col-md-6 col-lg-5">
      <div class="pro-det-cntnt">
       <h3>{{product.pname}}</h3>
       <p>
        <del>
         ${{((product.outprice*0.2)+parseFloat(product.outprice)).toFixed(2)}}
        </del> ${{product.outprice}}</p>
      </div>
      <div class="pro-det-rev">
       <ul>
        <li><i class="fas fa-star"></i></li>
        <li><a href="#">{{product.pf == null ? 0 : parseFloat(product.pf).toFixed(1)}} 评价({{product.count}})</a></li>
       </ul>
      </div>
      <div class="pro-det-sum">
       <p>库存:{{product.inventory}}</p>
      </div>
      <div class="pro-det-cart">
       <ul>
        <li> <input type="number" v-model="productNum" placeholder="1" min="1" /></li>
        <li> <a href="javascript:void(0);" class="btn btn-outline" @click="addCart"> <i class="fas fa-shopping-basket"></i> <span>添加购物车</span> </a></li>
        <li> <a href="javascript:void(0);" class="btn btn-outline" @click="addWish"> <i class="fas fa-heart"></i> </a></li>
       </ul>
      </div>
      <div class="pro-det-pay">
       <h5>Payment:</h5>
       <ul>
        <li><a href="#"><img src="../assets/images/pay-card/01.jpg" alt="payment-1" /></a></li>
        <li><a href="#"><img src="../assets/images/pay-card/02.jpg" alt="payment-2" /></a></li>
        <li><a href="#"><img src="../assets/images/pay-card/03.jpg" alt="payment-3" /></a></li>
        <li><a href="#"><img src="../assets/images/pay-card/04.jpg" alt="payment-4" /></a></li>
       </ul>
      </div>
      <div class="pro-det-share">
       <h5>Share:</h5>
       <ul class="pro-det-icon">
        <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
       </ul>
      </div>
     </div>
     <div class="col-sm-4 col-lg-2">
      <div class="pro-det-ad"> 
       <a href="#"><img src="../assets/images/ad-banner/02.jpg" alt="ad-2" /></a>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="pro-tab-part">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <div class="pro-tab-menu">
       <ul class="nav nav-tabs">
        <li><a href="#review" class="nav-link active" data-toggle="tab">点评 ({{product.count}})</a></li>
        <li><a href="#specific" class="nav-link" data-toggle="tab">规格</a></li>
        <li><a href="#descrip" class="nav-link" data-toggle="tab">描述</a></li>
       </ul>
      </div>
      <div class="tab-pane active" id="review">
       <div class="pro-tab-review">
        <ul class="review-list">
         <li class="review-item" v-for="item in pval">
          <div class="reviewer-img"> 
           <a href="#"><img :src=`../../../upload/${item.pic}` alt="reviewer-2" /></a>
          </div>
          <div class="reviewer-descrip">
           <div class="reviewer-meta"> 
            <a href="javascript:void(0);">{{item.uname}}</a>
            <p>{{item.pvaltime}}</p>
           </div>
           <ul class="reviewer-rating">
             <!-- 使用计算属性或内联方法来控制星星的数量 -->  
          <li v-for="n in parseInt(item.starnum)">  
            <i class="fas fa-star" :class="{ 'active': n <= parseInt(item.starnum) }"></i>  
          </li>  
          <!-- 如果starnum小于5，则添加剩余的未激活星星 -->  
          <li v-for="n in 5 - parseInt(item.starnum)">  
            <i class="fas fa-star"></i>  
          </li>  
           </ul>
           <div class="reviewer-quote">
            <p>{{item.valtext}}</p>
           </div>
          </div></li>
        </ul>
<!-------------------------------------------------------------------------------------->
       </div>
      </div>
      
      <div class="tab-pane" id="specific">
       <div class="pro-tab-specific">
        <table class="table table-bordered">
         <tbody>
          <tr>
           <th scope="row">产品编号</th>
           <td>{{product.pid}}</td>
          </tr>
          <tr>
           <th scope="row">重量</th>
           <td>{{product.weight}}</td>
          </tr>
          <tr>
           <th scope="row">品牌</th>
           <td>{{product.brand}}</td>
          </tr>
          <tr>
           <th scope="row">类别</th>
           <td>{{product.tname}}</td>
          </tr>
         </tbody>
        </table>
       </div>
      </div>
      <div class="tab-pane" id="descrip">
       <div class="pro-tab-descrip">
        <p>{{product.des}}</p>
       </div>
      </div>
     </div>
    </div>
   </div> 
  </section> 
  <section class="section related-part" v-if="AboutProduct != ''">
    <div class="container">
     <div class="row">
      <div class="col-lg-12">
       <div class="section-heading">
        <h2 class="title">相关产品</h2> 
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-lg-12">
       <div class="product-slider slider-arrow">
        <div class="product-card">
         <div class="product-img"> 
          <img :src=`../../../upload/${item1.pic}` alt="product-1" />
          <ul class="product-widget">
           
           <li><button @click="addAboutWish(item1)"><i class="fas fa-heart"></i></button></li>
           
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a :href=`product-details.html?${item1.pid}`>{{item1.pname}}</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
              ${{((item1.outprice*0.2)+parseFloat(item1.outprice)).toFixed(2)}}
            </del> ${{item1.outprice}}</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>{{item1.pf == null ? 0 : parseFloat(item1.pf).toFixed(1)}}/{{item1.count}}</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="javascript:void(0);" @click="addAboutCart(item1)"> <i class="fas fa-shopping-basket"></i> <span>添加购物车</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img :src=`../../../upload/${item2.pic}` alt="product-2" />
          <ul class="product-widget">
           
           <li><button @click="addAboutWish(item2)"><i class="fas fa-heart"></i></button></li>
           
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
            <h6><a :href=`product-details.html?${item2.pid}`>{{item2.pname}}</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
              ${{((item2.outprice*0.2)+parseFloat(item2.outprice)).toFixed(2)}}
            </del> ${{item2.outprice}}</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>{{item2.pf == null ? 0 : parseFloat(item2.pf).toFixed(1)}}/{{item2.count}}</span>
           </div>
          </div>
          <div class="product-btn"> 
            <a href="javascript:void(0);" @click="addAboutCart(item2)"> <i class="fas fa-shopping-basket"></i> <span>添加购物车</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
          <div class="product-img"> 
           <img :src=`../../../upload/${item3.pic}` alt="product-2" />
           <ul class="product-widget">
            
            <li><button @click="addAboutWish(item3)"><i class="fas fa-heart"></i></button></li>
            
           </ul>
          </div>
          <div class="product-content">
           <div class="product-name">
             <h6><a :href=`product-details.html?${item3.pid}`>{{item3.pname}}</a></h6>
           </div>
           <div class="product-price">
            <h6>
             <del>
               ${{((item3.outprice*0.2)+parseFloat(item3.outprice)).toFixed(2)}}
             </del> ${{item3.outprice}}</h6>
            <div class="product-rating"> 
             <i class="fas fa-star"></i> 
             <span>{{item3.pf == null ? 0 : parseFloat(item3.pf).toFixed(1)}}/{{item3.count}}</span>
            </div>
           </div>
           <div class="product-btn"> 
            <a href="javascript:void(0);" @click="addAboutCart(item3)"> <i class="fas fa-shopping-basket"></i> <span>添加购物车</span> </a>
          </div>
          </div>
         </div>
         <div class="product-card">
          <div class="product-img"> 
           <img :src=`../../../upload/${item4.pic}` alt="product-2" />
           <ul class="product-widget">
            
            <li><button @click="addAboutWish(item4)"><i class="fas fa-heart"></i></button></li>
            
           </ul>
          </div>
          <div class="product-content">
           <div class="product-name">
             <h6><a :href=`product-details.html?${item4.pid}`>{{item4.pname}}</a></h6>
           </div>
           <div class="product-price">
            <h6>
             <del>
               ${{((item4.outprice*0.2)+parseFloat(item4.outprice)).toFixed(2)}}
             </del> ${{item4.outprice}}</h6>
            <div class="product-rating"> 
             <i class="fas fa-star"></i> 
             <span>{{item4.pf == null ? 0 : parseFloat(item4.pf).toFixed(1)}}/{{item4.count}}</span>
            </div>
           </div>
           <div class="product-btn"> 
            <a href="javascript:void(0);" @click="addAboutCart(item4)"> <i class="fas fa-shopping-basket"></i> <span>添加购物车</span> </a>
          </div>
          </div>
         </div>
       </div>
      </div>
     </div>
    </div> 
   </section>  
   <!--
   <section class="new-part">
    <div class="container">
     <div class="row">
      <div class="col-lg-12">
       <div class="section-heading">
        <h2 class="title">New arrival products</h2> 
        <a href="shop-leftbar.html" class="btn btn-outline"><i class="fas fa-eye"></i> show more</a>
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-lg-12">
       <div class="product-slider slider-arrow">
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/06.png" alt="product-6" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/07.png" alt="product-7" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/08.png" alt="product-8" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/09.png" alt="product-9" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/10.png" alt="product-10" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
        <div class="product-card">
         <div class="product-img"> 
          <img src="../assets/images/product/11.png" alt="product-11" />
          <ul class="product-widget">
           <li><button><i class="fas fa-eye"></i></button></li>
           <li><button><i class="fas fa-heart"></i></button></li>
           <li><button><i class="fas fa-exchange-alt"></i></button></li>
          </ul>
         </div>
         <div class="product-content">
          <div class="product-name">
           <h6><a href="#">Heirloom Quinoa</a></h6>
          </div>
          <div class="product-price">
           <h6>
            <del>
             $80
            </del> $150</h6>
           <div class="product-rating"> 
            <i class="fas fa-star"></i> 
            <span>4.5/2</span>
           </div>
          </div>
          <div class="product-btn"> 
           <a href="#"> <i class="fas fa-shopping-basket"></i> <span>Add to Cart</span> </a>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div> 
   </section> 
   -->
  <section class="news-part">
   <div class="container">
    <div class="row">
     <div class="col-md-5 col-lg-6">
      <div class="news-content">
       <h2>Subscribe for Latest Offers</h2>
      </div>
     </div>
     <div class="col-md-7 col-lg-6">
      <form class="search-form news-form"> 
       <input type="text" placeholder="Enter Email Address" /> 
       <button class="btn btn-inline"> <i class="fas fa-envelope"></i> <span>Subscribe</span> </button>
      </form>
     </div>
    </div>
   </div> 
  </section> 
  <footer class="footer-part">
   <div class="container">
    <div class="row">
     <div class="col-md-6 col-lg-4">
      <div class="footer-content"> 
       <a href="#"><img src="../assets/images/logo/01.png" alt="logo" /></a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur repudiandae quisquam adipisci asperiores, ipsum ipsa repellat assumenda dolor perspiciatis.</p>
       <ul class="footer-icon">
        <li><a class="icon icon-inline" href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-linkedin-in"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-instagram"></i></a></li>
        <li><a class="icon icon-inline" href="#"><i class="fab fa-pinterest-p"></i></a></li>
       </ul>
      </div>
     </div>
     <div class="col-md-6 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Useful Links</h3>
       <div class="footer-widget">
        <ul>
         <li><a href="#">My Account</a></li>
         <li><a href="#">Order History</a></li>
         <li><a href="#">Order Tracking</a></li>
         <li><a href="#">Best Seller</a></li>
         <li><a href="#">New Arrivals</a></li>
        </ul>
        <ul>
         <li><a href="#">Location</a></li>
         <li><a href="#">Affiliates</a></li>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Carrer</a></li>
         <li><a href="#">Faq</a></li>
        </ul>
       </div>
      </div>
     </div>
     <div class="col-md-12 col-lg-4">
      <div class="footer-content">
       <h3 class="title">Download the App</h3>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta amet tenetur soluta blanditiis at optio molestias facilis praesentium eos! Sed placeat a labore corporis aliquam reiciendis eaque quisquam corrupti.</p>
      </div>
      <ul class="download-app">
       <li><a href="#"><img src="../assets/images/logo/google.png" alt="google" /></a></li>
       <li><a href="#"><img src="../assets/images/logo/app.png" alt="app" /></a></li>
      </ul>
     </div>
    </div>
   </div> 
  </footer>
  <div class="footer-bottom">
   <div class="container">
    <p>Copyright &copy; 2020 | All rights reserved by <a target="_blank" href="https://themeforest.net/user/mironcoder">Mironcoder</a></p>
    <ul class="pay-card">
     <li><a href="#"><img src="../assets/images/pay-card/01.jpg" alt="payment-1" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/02.jpg" alt="payment-2" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/03.jpg" alt="payment-3" /></a></li>
     <li><a href="#"><img src="../assets/images/pay-card/04.jpg" alt="payment-4" /></a></li>
    </ul>
   </div>
  </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
  <script src="../js/qs.js"></script>  
  <script src="../assets/source/js/vendor/jquery-1.12.4.min.js"></script> 
  <script src="../assets/source/js/vendor/popper.min.js"></script> 
  <script src="../assets/source/js/vendor/bootstrap.min.js"></script> 
  <script src="../assets/source/js/vendor/slick.min.js"></script> 
  <script src="../assets/source/js/custom/slick.js"></script> 
  <script src="../assets/source/js/custom/main.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        adminEmail:'',
        adminTel:'',
        uid:'',
        userInfo:{},//用户信息
        cartCount:0,//购物车数量
        wishCount:0,//心愿单数量///
        types:[],//类别信息
        product:{},//具体商品
        pid:'',//商品id
        productNum:0,//数量更改
        picsrc:"",
        pval:[],//评论信息
        AboutProduct:[],//相关产品
        item1:{},
        item2:{},
        item3:{},
        item4:{},
      },
      methods: {
        findAdminInfo(){//查询管理员信息
            axios.get("../userController/findAdminInfo").then(resp=>{
              localStorage.setItem("adminEmail",resp.data.email);
              localStorage.setItem("adminTel",resp.data.tel);
              this.adminEmail = resp.data.email;
              this.adminTel = resp.data.tel;
              
            });
          },
          findUserInfo(){//查询用户信息
            let uid = localStorage.getItem("uid");
              if(uid == null || uid == ""){
                alert("请先登录");
                  location.href="login.html";
					        return;
                
				    }else{
              this.uid = localStorage.getItem("uid");
            }
            axios.get("../userController/findUserInfo").then(resp=>{
                if(resp.data == -1){
                  alert("请先登录");
                  location.href = "login.html";
                  return;
                }else{
                  this.userInfo = resp.data;
                  console.log(resp.data);
                }
              });  
          },
          findTypes(){
            axios.get("../typeController/findTypes").then(resp=>{
              this.types = resp.data;
            });
          },
          getCartCount(){//得到购物车数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("cartCount");
            if(count == null || count == ""){
              axios.get("../carInfoController/getCartCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.cartCount = resp.data;
                console.log(this.cartCount);
                //存值
                localStorage.setItem("cartCount",this.cartCount);
              });
            }else{
              this.cartCount = count;
            }		
			    },
          getWishCount(){//得到心愿单数量
            if(this.userInfo == null){
              return;
            }
            let count = localStorage.getItem("wishCount");
            if(count == null || count == ""){
              axios.get("../wishController/getWishCount",{
                params:{
                  uid:this.uid
                }
                }).then(resp=>{
                this.wishCount = resp.data;
                //存值
                localStorage.setItem("wishCount",this.wishCount);
              });
            }else{
              this.wishCount = count;
            }		
			    },
          searchProduct(){//查出商品
            if(this.userInfo == null){
              return;
            }
            axios.get("../productController/searchProduct",{
              params:{
						      pid:this.pid					
					    }
            }).then(resp=>{
              if(resp.data == ''){
                return;
              }else{
                this.product = resp.data;
                this.picsrc = `../../../upload/${this.product.pic}`;
                console.log(this.product);
              } 
            });
          },
          addCart(){
            if(this.productNum == 0){
              return;
              alert("数量非法");
            }
            axios.get("../carInfoController/addCart",{
              params:{
                uid:this.uid,
                pid:this.pid,
                num:this.productNum,
                inventory:this.product.inventory
              }
            }).then(resp=>{
                if(resp.data != -1 && resp.data != 3){
                  alert("添加购物车成功");
                  //重新存值
                  if(resp.data == 2){
                    localStorage.setItem("cartCount",parseInt(this.cartCount) + 1);
                  }
                  this.getCartCount();
                }else if(resp.data == 3){
                    alert("库存不足");
                    return;
                }else{
                  alert("添加购物车失败");
                  return;
                }
            });
          },
          addWish(){
            if(this.productNum == 0){
              return;
              alert("数量非法");
            }
            axios.get("../wishController/addWish",{
              params:{
                uid:this.uid,
                pid:this.pid,
                price:this.product.outprice,
                num:this.productNum,
                inventory:this.product.inventory
              }
            }).then(resp=>{
                if(resp.data != -1 && resp.data != 3){
                  alert("添加心愿单成功");
                  //重新存值
                  if(resp.data == 2){
                    localStorage.setItem("wishCount",parseInt(this.wishCount) + 1);
                  }
                  this.getWishCount();
                }else if(resp.data == 3){
                    alert("库存不足");
                    return;
                }else{
                  alert("添加心愿单失败");
                  return;
                }
            });
          },
          getPval(){
            axios.get("../pvalController/getPval",{
              params:{
                pid:this.pid
              }
            }).then(resp=>{
                this.pval = resp.data;
            });
          },
          getAboutProduct(){
            console.log(this.product.tid);
            axios.get("../productController/getAboutProduct",{
              params:{
                pid:this.pid
              }
            }).then(resp=>{
                this.AboutProduct = resp.data;
                if(Array.isArray(this.AboutProduct)){
                  this.AboutProduct.forEach((item,index) => {
                  if(index == 0){
                    this.item1 = item;
                  }else if(index == 1){
                    this.item2 = item;
                  }else if(index == 2){
                    this.item3 = item;
                  }else if(index == 3){
                    this.item4 = item;
                  }
                });
                }
                console.log(this.AboutProduct);
            });
          },
          addAboutWish(obj){
            axios.get("../wishController/addWish",{
              params:{
                uid:this.uid,
                pid:obj.pid,
                price:obj.outprice,
                num:1,
                inventory:obj.inventory
              }
            }).then(resp=>{
                if(resp.data != -1 && resp.data != 3){
                  alert("添加心愿单成功");
                  //重新存值
                  if(resp.data == 2){
                    localStorage.setItem("wishCount",parseInt(this.wishCount) + 1);
                  }
                  this.getWishCount();
                }else if(resp.data == 3){
                    alert("库存不足");
                    return;
                }else{
                  alert("添加心愿单失败");
                  return;
                }
            });
          },
          addAboutCart(obj){
            axios.get("../carInfoController/addCart",{
              params:{
                uid:this.uid,
                pid:obj.pid,
                num:1,
                inventory:obj.inventory
              }
            }).then(resp=>{
                if(resp.data != -1 && resp.data != 3){
                  alert("添加购物车成功");
                  //重新存值
                  if(resp.data == 2){
                    localStorage.setItem("cartCount",parseInt(this.cartCount) + 1);
                  }
                  this.getCartCount();
                }else if(resp.data == 3){
                    alert("库存不足");
                    return;
                }else{
                  alert("添加购物车失败");
                  return;
                }
            });
          }
      },
      created(){
        this.pid = location.search.replace("?","");
        this.searchProduct();
        this.findAdminInfo();
        this.findUserInfo();
        this.findTypes();
        this.getCartCount();
        this.getWishCount();
        this.getPval();
        this.getAboutProduct();
      }
    });
  </script> 
 </body>
</html>